<!DOCTYPE html>
<html>
<head><title>Backbone Model Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="../../lib/jquery.min.js"></script>
    <script src="../../lib/underscore.js"></script>
    <script src="../../lib/backbone.js"></script>
</head>
<body>
<script type="text/template" id="search_template"><label><%=searchLabel%></label><input type="text" id="search_input">
<input type="button" id="search_button" value="Search">
<div id="search_container"></div></script>
<div id="search_container"></div>
<script type="text/javascript">SearchView = Backbone.View.extend({
    initialize: function () {
        this.render();
    },
    render: function () {
        // Compile the template using underscore
        var template = _.template($("#search_template").html(), {searchLabel: "Label for Search from init"});
        // Load the compiled HTML into the Backbone "el"
        this.$el.html(template);
    },
    events: {
        "click input[type=button]": "doSearch"
    },
    doSearch: function () {
        alert("Search for " + $('#search_input').val());
    }

});
var search_view = new SearchView({el: $("#search_container"), age: "20"});

Person = Backbone.Model.extend({
    validate: function (attributes) {
        if (attributes.age < 10) {
            return "You can't be less than 10 years old";
        }
    },
    initialize: function () {
        this.on("change:name", function (model) {
            alert("Changed name to " + model.get("name"))
        });
        this.bind("error", function (model, error) {
            // We have received an error, log it, alert it or forget it :)
            alert(error);
        });
    }
});
var person = new Person();
person.set({name: "mada"});
person.set({age: 8});</script>
</body>
</html>